#include('../header.html', {title: '视频详情'})
<style>
  @media (max-width: 991px) {
    .hidden-m {
      display: none;
    }
  }
</style>
<div class="es-wrap">
  <!-- 视频信息展示部分 -->
  <div class="container">
    <!-- 刀削式导航栏 -->
    <ol class="breadcrumb breadcrumb-o">
      <li><a href="/">首页</a></li>
      <li><a :href="'/allClass?spId='+course.specialtyId">{{course.specialty?course.specialty.name:'年级'}}</a></li>
      <li><a :href="'/allClass?spId='+course.specialtyId+'&sbId='+course.subjectId">{{course.subject?course.subject.name:'学科'}}</a></li>
      #if(join_stu)
      <li><a href="../info">{{course.name}}</a></li>
      #end
      <li class="active">{{course.name}}</li>
    </ol>

    <div class="es-section course-detail-section clearfix">
      <div class="course-detail-top clearfix">
        <ul class="course-operation hidden-xs hidden-sm clearfix">
          <!--营销页显示-->
          #if(!isMyPublish)
          <li v-if="isCollect" class="js-unfavorite-btn" style="min-width:45px;margin:0;">
            <a @click="outCollect()" class="btn btn-default btn-xs" href="javascript:"
               data-toggle="tooltip" data-placement="top"
               data-trigger="hover" data-original-title="已收藏">
              <i class="es-icon es-icon-bookmark color-primary"></i>
            </a>
          </li>
          <li v-else-if="!isCollect" class="js-favorite-btn" style="min-width:45px;margin:0;">
            <a @click="collect()" class="btn btn-default btn-xs" href="javascript:" data-toggle="tooltip"
               data-placement="top"
               data-trigger="hover" data-original-title="收藏"> <i class="es-icon es-icon-bookmarkoutline"></i>
            </a>
          </li>
          #end
          #if(join_stu)
          <li>
            <a @click="unJoinLearn" class="btn btn-default btn-xs" href="javascript:" data-toggle="tooltip"
               data-placement="top"
               data-trigger="hover" data-original-title="退出"><i class="es-icon es-icon-exit"></i>
            </a>
          </li>
          #end
        </ul>
      </div>
      <!--未加入学习显示-->
      #if(!join_stu)
      <div class="course-detail-bottom">
        <div class="course-detail-img">
          <img class="img-responsive" :src="course.cover" :alt="course.name">
          <div class="image-overlay"></div>
          <a href="#" data-toggle="modal" class="course-img-cover">
            <i class="es-icon es-icon-playcircleoutline"></i>
          </a>
          <!--评价星级-->
          <div class="course-detail-remask">
            <div class="score pull-right mb0">
              <i class="es-icon es-icon-star color-warning"></i>
              <i class="es-icon es-icon-star color-warning"></i>
              <i class="es-icon es-icon-star color-warning"></i>
              <i class="es-icon es-icon-star color-warning"></i>
              <i class="es-icon es-icon-starhalf color-warning"></i>
              <span class="vertical-middle">({{num.comment}}人评价)</span>
            </div>
          </div>
        </div>

        <div class="course-detail-info">
          <div class="course-detail-top">
            <span class="course-detail-heading">{{course.name}}</span>
            <p class="text-overflow subtitle color-gray">
              {{course.subhead}}
            </p>
          </div>
          <div class="course-detail-gray not-activity ">
            <div class="mb15 hidden-xs">
              <span class="course-detail-title ">学习有效期</span>
              <span class="gray-dark mrl">永久有效</span>
            </div>
            <div class="mb15 hidden-xs">
              <span class="course-detail-title ">授课老师</span>
              <span class="gray-dark mrl">{{cuser.name?cuser.name:cuser.username}}</span>
            </div>
          </div>
          <div style="min-height: 58px;" class="course-detail-section-responsive visible-xs visible-sm clearfix">
            <ul class="clearfix">
              <!--营销页显示-->
              #if(!isMyPublish)
              <li v-if="isCollect" class="js-unfavorite-btn" id="unfavorite-btn">
                <a @click="outCollect()" class="color-primary" href="javascript:">
                  <i class="es-icon es-icon-bookmark color-primary"></i>
                  <br>
                  已收藏
                </a>
              </li>
              <li v-else-if="!isCollect" class="js-favorite-btn" id="favorite-btn">
                <a @click="collect()" href="javascript:">
                  <i class="es-icon es-icon-bookmarkoutline"></i>
                  <br>
                  收藏
                </a>
              </li>
              #end
            </ul>
          </div>
          <div class="text-right buy-btn-group">
            #if(isJoin)
            <a class="btn btn-primary " href="join/info">继续学习</a>
            #else
            <a class="btn btn-primary " @click="joinLearn" href="javascript:">
              加入学习
            </a>
            #end
          </div>
        </div>
      </div>
      #else
      <div class="course-detail-top">
        <span class="course-detail-heading">{{course.name}}</span>
      </div>
      <!--加入学习显示-->
      <section class="course-freelearn-section">
        <div class="row">
          <div class="col-md-3">
            <div class="course-progress">
              <div class="cricle-progress" id="freeprogress" :data-percent="learnInfo.rate">
                <span class="percent"></span>
              </div>
            </div>
          </div>
          <div class="col-md-7 hidden-xs hidden-sm">
            <ul class="clearfix text-12 course-learn-list ">
              <li>
                <p class="mb15 color-gray">
                  <i class="es-icon es-icon-iccheckcircleblack24px mrm"></i>已完成
                </p>
                <span class="text-16">
                  <span class="color-primary">{{learnInfo.finish}}</span> /
                  <span class="mrl">{{learnInfo.totalTask}}</span>任务</span>
              </li>
              <li>
                <p class="mb15 color-gray">
                  <i class="es-icon es-icon-today mrm"></i>学习有效期
                </p>
                <span class="text-16">永久有效</span>
              </li>
              <li>
                <p class="mb15 color-gray">
                  <i class="es-icon es-icon-book mrm"></i>下一学习任务
                </p>
                <a class="link-dark text-16" :href="nextTaskUrl">{{learnInfo.nextTask.name}}</a>
              </li>
            </ul>
          </div>
          <div class="col-md-2 hidden-xs hidden-sm">
            <a class="btn btn-primary  mt10" :href="nextTaskUrl">
              {{learnInfo.finish > 0 ? learnInfo.rate==100?'已完成':'继续学习':'开始学习'}}
            </a>
          </div>
        </div>
        <div class="course-detail-section-responsive visible-xs visible-sm clearfix">
          <div class="pull-left" style="padding: 6px 10px;">
            <a @click="unJoinLearn" class="btn btn-default btn-xs">
              <i class="es-icon es-icon-exit"></i>
            </a>
          </div>
          <div class="pull-right visible-xs visible-sm">
            <span class="mr20">完成任务：{{learnInfo.finish}} / {{learnInfo.totalTask}}</span>
            <a class="btn btn-primary" :href="nextTaskUrl">
              {{learnInfo.finish > 0 ? learnInfo.rate==100?'已完成':'继续学习':'开始学习'}}
            </a>
          </div>
        </div>
      </section>
      #end
    </div>
    <!--公告滚动-->
    <div id="gonggao" v-if="on_anns.length!=0" class="alert alert-info alert-danger" style="padding: 5px;">
      <div id="news" style="height: 2.5rem;overflow:hidden;line-height: 25px;">
        <ul style="margin-top:0!important; list-style: none; color: #43bc60;">
          <template v-for="(ann, index) in on_anns">
            <li class="row" @click="getShowAnn(index)">
              <i class="glyphicon glyphicon-info-sign col-md-1" style="padding-top: 7px"></i>&nbsp;&nbsp;&nbsp;
              <a href="#" style="color: #43bc60;" data-toggle="modal" data-target="#show"
                 class="cutting btn btn-link color-primary col-md-6 text-left">
                {{ann.content}}
              </a>
              <a href="#" data-toggle="modal" data-target="#show"
                 class="btn btn-link color-primary col-md-3 text-right">
                所属任务{{ann.task ? ann.task.name : '默认教学任务'}}
              </a>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 course-detail-content">
        <!--导航拦-->
        <section class="es-section">
          <div class="nav-btn-tab">
            <!-- 导航栏 -->
            <ul class="nav nav-tabs " role="tablist">
              <li role="presentation" :class="tab==0?'active':''">
                <a href="javascript:" @click="switchTab(0)">
                  介绍
                </a>
              </li>
              <li role="presentation" :class="tab==1?'active':''">
                <a href="javascript:" @click="switchTab(1)">
                  目录
                </a>
              </li>
              <li role="presentation" :class="tab==2?'active':''">
                <a href="javascript:" @click="switchTab(2)">
                  笔记
                  <small v-if="num.note>0">({{num.note}})</small>
                </a>
              </li>
              <li role="presentation" :class="tab==3?'active':''">
                <a href="javascript:" @click="switchTab(3)">
                  评价
                  <small v-if="num.comment>0">({{num.comment}})</small>
                </a>
              </li>
              <template v-if="join_stu">
                <li role="presentation" :class="tab==4?'active':''">
                  <a href="javascript:" @click="switchTab(4)">
                    资料区
                    <small v-if="num.material>0">({{num.material}})</small>
                  </a>
                </li>
                <li role="presentation" :class="tab==5?'active':''">
                  <a href="javascript:" @click="switchTab(5)">
                    问答区
                    <small v-if="ask_num>0">({{ask_num}})</small>
                  </a>
                </li>
                <li role="presentation" :class="tab==6?'active':''">
                  <a href="javascript:" @click="switchTab(6)">
                    练习区
                    <small v-if="num.practice>0">({{num.practice}})</small>
                  </a>
                </li>
                <li class="btnbar hidden-xs" :class="tab==5?'':'hidden'">
                  <a href="javascript:" data-toggle="modal" data-target="#pubPro">
                    + 提问
                  </a>
                </li>
              </template>
              #if(role > 1 && isMyPublish)
              <li class="btnbar hidden-xs" :class="tab==5?'hidden':''">
                <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-link">
                  + 公告
                </a>
              </li>
              #end
            </ul>
          </div>
          <!--发布问题模态框-->
          <div class="modal fade" id="pubPro" tabindex="-1" role="dialog" style="z-index: 100001;">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button class="close" data-dismiss="modal" aria-hidden="true">
                    x
                  </button>
                  <h4 id="pubProTitle">
                    提交问题
                  </h4>
                </div>
                <div class="modal-body" id="addProblem">
                  <form id="proForm">
                    <div class="row form-group">
                      <div class="col-md-2 control-label">
                        <label for="addPro">所属任务</label>
                      </div>
                      <div class="col-md-8 controls" style="z-index:2000;">
                        <select id="tasks_ask" class="form-control" v-model="taskId">
                          <option value="0">默认教学计划</option>
                          <option v-for="task in course.tasks" :value="task.id">{{task.name}}</option>
                        </select>
                        <div class="help-block" style="display:none;"></div>
                      </div>
                    </div>
                    <div class="row form-group">
                      <div class="col-md-2 control-label">
                        <label for="title">问题标题</label>
                      </div>
                      <div class="col-md-8 controls">
                        <input id="title" class="form-control" placeholder="问题标题..." v-model="ask.title"  autocomplete="off">
                      </div>
                    </div>
                    <div class="row form-group">
                      <div class="col-md-2 control-label">
                        <label for="addPro">问题描述</label>
                      </div>
                      <div class="col-md-8 controls">
                          <textarea class="form-control" rows="4" id="addPro" placeholder="请输入你的问题……" v-model="ask.content">
                          </textarea>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" @click="publishAsk">提交</button>
                </div>
              </div>
            </div>
          </div>
          #if(role > 1 && isMyPublish)
          <!--发布公告模态框-->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="z-index: 100001;"
               aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                  </button>
                  <h4 id="myModalLabel" class="modal-title">
                    公告管理
                  </h4>
                </div>
                <div class="modal-body" id="addnotice" style="display: block;">
                  <ul class="nav nav-tabs mbm">
                    <li class="active" id="title1">
                      <a href="#" onclick="change(1);">添加公告</a>
                    </li>
                    <li id="title2">
                      <a href="#" onclick="change(2);">历史公告</a>
                    </li>
                  </ul>
                  <form id="announcement-create-form" class="form-horizontal" method="post"
                        action="/admin/announcement/create" novalidate="novalidate" data-widget-cid="widget-0">
                    <div class="row form-group">
                      <div class="col-md-2 control-label">
                        <label for="tasks">所属任务</label>
                      </div>
                      <div class="col-md-8 controls" style="z-index:2000;">
                        <select id="tasks" class="form-control" v-model="taskId">
                          <option value="0">默认教学计划</option>
                          <option v-for="task in course.tasks" :value="task.id">{{task.name}}</option>
                        </select>
                        <div class="help-block" style="display:none;"></div>
                      </div>
                    </div>
                    <div class="row form-group">
                      <div class="col-md-2 control-label">
                        <label for="startTime">发布时间</label>
                      </div>
                      <div class="col-md-8 controls" style="z-index:2000;">
                        <input type="text" id="startTime" name="startTime" class="form-control" value=""
                               data-widget-cid="widget-1" data-explain="" autocomplete="off">
                        <div class="help-block" style="display:none;"></div>
                      </div>
                    </div>
                    <input type="hidden" id="url" name="url" class="form-control" value="">
                    <div class="row form-group">
                      <div class="col-md-2 control-label">
                        <label for="endTime">结束时间</label>
                      </div>
                      <div class="col-md-8 controls" style="z-index:2000;">
                        <input type="text" id="endTime" name="startTime" class="form-control" autocomplete="off">
                        <div class="help-block" style="display:none;"></div>
                      </div>
                    </div>

                    <div class="row form-group">
                      <div class="col-md-2 control-label">
                        <label for="annContent">公告内容</label>
                      </div>
                      <div class="col-md-8 controls" style="z-index:2000;">
                        <textarea id="annContent" class="form-control" v-model="new_ann.content"></textarea>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-body" id="allnotice" style="display: none;">
                  <ul class="nav nav-tabs mbm">
                    <li class="active" id="title3">
                      <a href="javascript:" onclick="change(1);">添加公告</a>
                    </li>
                    <li id="title4">
                      <a href="javascript:" onclick="change(2);">历史公告</a>
                    </li>
                  </ul>
                  <div class="announcement-list" id="accordion">
                    <h5 align="center" v-if="announcements.length==0">暂无公告！</h5>
                    <template id="announcement-li" v-for="(ann, index) in announcements">
                      <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                          <h4 class="panel-title" :class="addClass(index)">
                            <div class="row" data-toggle="collapse" data-parent="#accordion" :data-target="getIndexId(index)"
                                 aria-expanded="true" aria-controls="collapseOne" style="cursor: pointer;">
                              <div class="col-md-3">
                                <span>{{ann.task ? ann.task.name : '默认教学计划'}}</span>
                              </div>
                              <div class="col-md-4 cutting">
                                {{ann.content}}
                              </div>
                              <div class="col-md-5">
                                开始时间:
                                <small :class="addClass(index)">{{ann.startTime}}</small>
                              </div>
                            </div>
                          </h4>
                        </div>
                        <div :id="getIndex(index)" class="panel-collapse collapse"
                             role="tabpanel" aria-labelledby="headingOne" aria-expanded="true">
                          <p :class="addClass(index)" style="padding: 5px 0">{{ann.content}}</p>
                        </div>
                      </div>
                    </template>
                  </div>
                  <nav v-if="page.totalPages>1" class="text-center">
                    <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
                  </nav>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                  </button>
                  <button v-if="isPubAnn" type="button" class="btn btn-primary" @click="publishAnn">
                    确定发布
                  </button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal -->
          </div>
          #end
          <!--公告显示模态框-->
          <div class="modal fade" id="show" tabindex="-1" role="dialog" style="z-index: 100001;"
               aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                  </button>
                  <h4 class="modal-title">
                    公告
                  </h4>
                </div>
                <div class="modal-body" style="display: block;">
                  {{show_ann.content}}
                </div>
                <div class="modal-footer">
                  公告所属任务: {{show_ann.task ? show_ann.task.name : '默认教学任务'}}&nbsp;&nbsp;&nbsp;
                  发表于{{show_ann.time}}
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal -->
          </div>
          <!-- 内容区 -->
          <div class="nav-content">
            <div style="width: 100px; height: 160px; margin: 0 auto;" v-show="loading" class="infinite-loading"></div>
            <div id="content" style="padding: 0 5px;"></div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  //使得每次打开公告模态框时，开始时间更新
  $(function () {
    $('#myModal').on('show.bs.modal', function () {
      laydate.render({
        elem : '#startTime',
        type : 'datetime',
        value: new Date()
      });
      infoVm.getPage();
    });
  });
  // 简介，课程目录，笔记，评价，资料区，问答区，练习区. 对应相对路径
  var tabs = ['intro', 'tasks', 'notes', 'comments', 'material', 'ask', 'practice'];
  var infoVm = new Vue({
    el: '.es-wrap',
    data: {
      course: {
        id: ${kid},
        tasks: []
      },
      learnInfo: {
        rate: 0,  // 学习进度
        nextTask: {}
      },
      cuser: {}, // 当前课程授课老师
      loading: false,
      join_stu: ${join_stu?!false},
      isMyPublish: ${isMyPublish?!false},
      tab: ${wid>0?5:join_stu?1:0},
      wid: ${wid},
      isCollect: ${isCollect},
      //公告
      isPubAnn: true,
      announcements: [],
      new_ann: {
        content: ''
      },
      on_anns: [],
      show_ann: {},
      taskId: '0',
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 5
      },
      ask: [],
      ask_num: '',
      num: {  // 数量值
        note: 0,
        comment: 0,
        material: 0,
        practice: 0
      }
    },
    computed: {
      nextTaskUrl: function () {
        var task = this.learnInfo.nextTask;
        if (task != null && task.id != null) {
          return '/course/'+task.courseId+'/task/'+task.id+'/show';
        } else
          return 'javascript:';
      }
    },
    methods: {
      getShowAnn: function (index) {
        infoVm.show_ann = {};
        infoVm.show_ann = infoVm.on_anns[index];
      },
      getOnAnn: function () {
        infoVm.on_anns = infoVm.announcements.filter(function (t) {
          var startTime =  new Date(Date.parse(t.startTime.replace(/-/g, "/"))).getTime();
          var endTime =  new Date(Date.parse(t.endTime.replace(/-/g, "/"))).getTime();
          var nowTime = new Date().getTime();
          if (startTime < nowTime && endTime > nowTime) {
            return true;
          }
          return false;
        })
      },
      getPage: function () {
        var vm = this;
        $.post('/user/teacher/announcement/' + this.course.id + '/showAnnByKid', {page: this.page.pageNum}, function (data) {
          if(data.success) {
            vm.announcements = [];
            vm.announcements = data.payload.rows;
            vm.page.pageNum = data.payload.pageNum;
            vm.page.totalPages = data.payload.totalPages;
          }
        })
      },
      gotoPage: function (page) {
        this.page.pageNum = page;
      },
      publishAnn: function () {
        var startTime = $('#startTime')[0].value;
        var endTime = $('#endTime')[0].value;
        if (startTime == "") {
          layer.msg('请填写开始时间!', {
            time: 1500
          });
          return false;
        }
        if (endTime == "") {
          layer.msg('请填写结束时间!', {
            time: 1500
          });
          return false;
        }
        if (startTime > endTime) {
          layer.msg('结束时间不应早于开始时间!', {
            time: 1500
          });
          return false;
        }
        if (infoVm.new_ann.content == "") {
          layer.msg('请填写公告内容!', {
            time: 1500
          });
          $('#annContent').focus();
          return false;
        }
        var vm = this;
        $.ajax({
          type: 'post',
          data: {startTime: startTime, taskId: infoVm.taskId, endTime: endTime, content: infoVm.new_ann.content, courseId: this.course.id},
          url: '/user/teacher/announcement/publishAnn',
          success: function (data) {
            $('#endTime')[0].value = '';
            $('#myModal').modal('hide');
            infoVm.new_ann.content = '';
            layer.msg('添加成功', {
              time: 2000
            });
            console.log(vm.announcements.length<vm.page.limit);
            if(vm.announcements.length<vm.page.limit) {
              vm.announcements.push(data.payload.rows[0]);
              return;
            }
            this.getPage();
          }
        });
      },
      getIndex: function (index) {
        return 'index' + index
      },
      getIndexId: function (index) {
        return '#index' + index
      },
      //为不同状态的公告添加不同的配色
      addClass: function (index) {
        var i = this.getStatus(index);
        switch (i) {
          case -1: return 'color-danger';
          case 0:  return 'color-info';
          case 1:  return 'color-primary';
        }
      },
      // 获取公告的状态,1表示尚未进行，0表示正在进行，-1表示已结束
      getStatus: function (index) {
        var startTime = new Date(Date.parse(infoVm.announcements[index].startTime.replace(/-/g, "/"))).getTime();
        var endTime = new Date(Date.parse(infoVm.announcements[index].endTime.replace(/-/g, "/"))).getTime();
        var nowTime = new Date().getTime();
        if (startTime > nowTime) {
          return 1;
        }else if (endTime < nowTime) {
          return -1;
        }else {
          return 0;
        }
      },
      switchTab: function (n) { // 切换选项卡
        this.tab = n;
        // sessionStorage.setItem(TAB_KSY, n);
      },
      loadTab: function (url) {
        var box = $('#content');
        box.html('');
        this.loading = true;
        $.ajax({
          type: 'get',
          url: "/course/" + this.course.id + "/" + url,
          dataType: 'html',
          success: function (html) {
            box.html(html);
            infoVm.loading = false;
          },
          error: function (error) {
            var code = error.status;
            var msg = error.statusText;
            box.html('<div class="text-center"><h4>' + code + '</h4><p>' + msg + '</p></div>');
            infoVm.loading = false;
          }
        });
      },
      joinLearn: function () { // 加入学习
        if (${isLogin ?! false}) {
          if (!this.isMyPublish) {
            $.post('/course/learn/api/' + this.course.id + '/join', function (data) {
              if (data.success || data.code === 302) { // 302表示是自己发布的课程 直接跳转
                location.href = "join/info";
              } else {
                layer.msg(data.msg, {
                  icon: 5,
                  time: 1200
                })
              }
            });
          } else {location.href = "join/info";}
        } else {
          layer.msg('请先登录！', {icon: 5, time: 1200});
        }
      },
      unJoinLearn: function () { // 退出学习
        if (!this.isMyPublish) {
          $.post('/course/learn/api/' + this.course.id + '/unjoin', function (data) {
            if (data.success) {
              layer.msg('退出学习成功！', {
                icon: 5,
                time: 1200
              });
              window.setTimeout(function () {
                location.href = "../info";
              }, 1250);
            }
          });
        } else {
          layer.msg('自己的课程朝那退？', {
            icon: 5,
            time: 1200
          });
        }
      },
      collect: function() { //加入收藏
        var self = this;
        $.post('/course/' + ${kid} +'/collect', function (data) {
          if (data.success) {
            self.isCollect = true;
          } else {
            layer.msg(data.msg, {
              icon: 5,
              time: 1200
            })
          }
        });
      },
      outCollect: function () {//删除收藏
        var self = this;
        $.post('/course/' + ${kid} +'/collect/cancel', function (data) {
          if (data.success) {
            self.isCollect = false;
          } else {
            layer.msg(data.msg, {
              icon: 5,
              time: 1200
            })
          }
        });
      },
      publishAsk: function () {
        if(!this.ask.title) {
          layer.msg('请填写问题的标题！', {
            time: 1500
          });
          $('#title').focus();
          return false;
        }
        if(!this.ask.content) {
          layer.msg('请填写问题的内容！', {
            time: 1500
          });
          $('#addPro').focus();
          return false;
        }
        var vm = this;
        $.ajax({
          type: 'post',
          url: "/course/ask/api/" + ${kid} + "/join/info/add",
          dataType: 'json',
          data: {title: infoVm.ask.title, content: infoVm.ask.content, taskId: infoVm.taskId, teaId: infoVm.cuser.id},
          success: function (data) {
            $('#pubPro').modal('hide');
            $('#pubPro').on('hidden.bs.modal', function () {
              vm.ask.title = '';
              vm.ask.content = '';
            });
            layer.msg('添加成功', {
              time: 1500
            });
            infoVm.ask_num++;
            if(askVm.show_ask.length < askVm.page.limit) {
              askVm.show_ask.push(data.payload);
              return;
            }
            askVm.getPage();
          }
        })
      },
      getAskNum: function () { // 变成获取所有的个数数据方法
        var self = this;
        $.post('/course/ask/api/${kid}/join/info/get', function (data) {
          if (data.success) {
            infoVm.ask_num = data.payload.totalRows;
          }
        });
        $.post('/count/api/course/numbers', {kid: self.course.id}, function (data) {
          console.log(data);
          self.num = data.payload;
        });
      }
    },
    watch: {
      tab: function (nv, ov) {
        if (nv !== ov) {
          if (nv >= 0 && nv <= tabs.length) {
            this.loadTab(tabs[this.tab]);
          }
        }
      },
      'page.pageNum': function (nv) {
        this.getPage();
      }
    },
    created: function () {
      var vm = this;
      $.post("/course/api/" + this.course.id, function (data) {
        if (data.success) {
          infoVm.course = data.payload;
          infoVm.cuser = data.payload.user;

          if (infoVm.wid > 0) {
            infoVm.loadTab('ask/' + infoVm.wid + '/info');
          } else {
            infoVm.loadTab(tabs[infoVm.tab]);
          }
        }
      });

      // 学习信息 获取加入学习的学习信息
      if (this.join_stu || this.isMyPublish) {
        $.post('/course/learn/api/one', {kid: this.course.id}, function (data) {
          if (data.success) {
            infoVm.learnInfo = data.payload;
            if (infoVm.learnInfo.nextTask == null)  infoVm.learnInfo.nextTask = {}
          } else {
            console.log("! " + data.msg);
          }
          renderPropress(infoVm.learnInfo.rate); // 进度圆圈
        });
      }

      // 获取对应课程所有的公告
      $.post('/user/teacher/announcement/' + this.course.id + '/showAnnByKid', function (data) {
        if (data.success) {
          infoVm.announcements = data.payload.rows;
        }
        vm.getOnAnn();
      });

      // 获取当前课程所有已发布的任务
      $.post('/course/task/api/' + this.course.id + '/page', {page: 1, size: 2000}, function (data) {
        if (data.success) {
          infoVm.course.tasks = data.payload.rows;
        }
      });

      this.getAskNum();
    }
  });
  //  <i class="es-icon es-icon-bookmark color-primary"></i>
  //  <i class="es-icon es-icon-bookmarkoutline"></i>

  //执行一个laydate实例
  laydate.render({
    elem: '#endTime', //指定元素
    type: 'datetime'

  });
  laydate.render({
    elem: '#startTime', //指定元素
    type: 'datetime',
    value: new Date()
  });

  function change(ob) {
    if (ob == 1) {
      infoVm.isPubAnn = true;
      $('#addnotice').css("display", "block");
      $('#allnotice').css("display", "none");
      $('#title1').attr("class", "active");
      $('#title2').attr("class", "");
    } else if (ob == 2) {
      infoVm.isPubAnn = false;
      $('#addnotice').css("display", "none");
      $('#allnotice').css("display", "block");
      $('#title3').attr("class", "");
      $('#title4').attr("class", "active");
    }

  }


  function autoScroll(obj) {
    $(obj).find('ul').animate({
      marginTop: '-2.8rem'
    }, 1000, function () {
      $(this).css({marginTop: "0px"});
      var li = $("#gonggao ul").children().first().clone(true);
      $("#gonggao ul li:last").after(li);
      $("#gonggao ul li:first").remove();
    })
  }


  $(function () {
    setInterval('autoScroll("#news")', 5000);
  });

  // 渲染进度条
  // Translator.trans("course_set.learn_progress")
  function renderPropress(percent) {
    var t = $(".color-primary").css("color"),
        e = $(".color-warning").css("color");
    $("#freeprogress").easyPieChart({
      easing: "easeOutBounce",
      trackColor: "#ebebeb",
      barColor: t,
      scaleColor: !1,
      lineWidth: 14,
      size: 145,
      percent: percent,
      onStep: function(t, e, n) {
        $("canvas").css("height", "146px"),
            $("canvas").css("width", "146px"), 100 == Math.round(n) && $(this.el).addClass("done"),
            $(this.el).find(".percent").html('学习进度<br><span class="num">' + Math.round(n) + "%</span>")
      }
    });
  }
</script>

#include('../footer.html')